@import "mixins";
@import "helpers";
// Grid Variables
$num-cols: 12 !default;
$grid-gutter: 20px;

.tvo-testimonials-display-grid, .tvo-item-grid {
  @include display-flex;
  -webkit-flex-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
  margin-left: (-$grid-gutter*0.5);
  margin-right: (-$grid-gutter*0.5);

  .tvo-item-col {
    box-sizing: border-box;
  }
}

.tvo-item-col {
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  margin-bottom: $grid-gutter;
  padding: 0 ($grid-gutter*0.5);
  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote(calc(100 / ($num-cols / $i)) + "%");
    &.tvo-item-s#{$i} {
      -webkit-flex-basis: $perc;
      flex-basis: $perc;
      max-width: $perc;
    }
    $i: $i+1;
  }
  @media (min-width: 940px) {
    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote(calc(100 / ($num-cols / $i)) + "%");
      &.tvo-item-m#{$i} {
        -webkit-flex-basis: $perc;
        flex-basis: $perc;
        max-width: $perc;
      }
      $i: $i+1;
    }
  }
  @media (min-width: 1080px) {
    $i: 0;
    @while $i <= $num-cols {
      $perc: unquote(calc(100 / ($num-cols / $i)) + "%");
      &.tvo-item-l#{$i} {
        -webkit-flex-basis: $perc;
        flex-basis: $perc;
        max-width: $perc;
      }
      $i: $i+1;
    }
  }
}
